<div id="history">
  <div id="historyMap">
    <div class="filter">
      <input type="text" class="keywords" placeholder="workflow name">
      <i class="fa fa-search search"></i>
    </div>
    <ul class="maps">
      <li class="stage-map">
        <!-- <div class="map-lt">
          <span>Stage</span>
          <h3 class="stage-name"></h3>
          <p class="marg-no">
            <span class="action-name bg-action"></span>
            <span class="action-name bg-action"></span>
          </p>
        </div> -->
        <div class="map-rt">
          <p class="marg-bt-five">
            <img src="../../assets/images/icon-goworkflow.png" />
            <span>Action to Workflow</span>
          </p>
          <p class="marg-no">
            <img src="../../assets/images/icon-running.png" />
            <span>Action Running</span>
          </p>
        </div>
      </li>
      <li class="status-map">
        <div class="map-lt">
          <img src="../../assets/images/icon-status.png" />
          <span>Status</span>
          <h3 class="stage-name"></h3>
          <p class="marg-no">
            <span class="action-name bg-fail"></span>
            <span>FAIL</span>
          </p>
        </div>
        <div class="map-rt">
          <p class="marg-bt-five">
            <span class="action-name bg-running"></span>
            <span>RUNNING</span>
          </p>
          <p class="marg-no">
            <span class="action-name bg-success"></span>
            <span>SUCCESS</span>
          </p>
        </div>
      </li>
      <li class="time-map">
        <div class="map-lt">
          <img src="../../assets/images/icon-time.png" />
          <h3 class="stage-name"></h3>
          <p class="marg-no">
            <span class="action-name"></span>
            <span>Less</span>
          </p>
        </div>
        <div class="map-lt">
          <p class="marg-bt-five">
            <span class="action-name bg-fail-x"></span>
            <span class="action-name bg-fail-s"></span>
            <span class="action-name bg-fail-m"></span>
            <span class="action-name bg-fail"></span>
            <span class="action-name bg-fail-l"></span>
          </p>
          <p class="marg-no">
            <span class="action-name bg-success-x"></span>
            <span class="action-name bg-success-s"></span>
            <span class="action-name bg-success-m"></span>
            <span class="action-name bg-success"></span>
            <span class="action-name bg-success-l"></span>
          </p>
        </div>
        <div class="time-rt">
          More
        </div>
      </li>
    </ul>
  </div>
  <div id="historyList">
   
  </div>
  <div id="historyPages">
    <div id="paginate"></div>
  </div>
  <div id="workflowDialog" class="dispN">
    <div class="shade"></div>
    <div id="startedRecords">
      <div id="infos">
        <div class="breadcrumbs">
        </div>
        <div class="record-info">
          <div class="records">
            <!-- <div class="item-record">
              <div class="workflow-name">workflowname</div>
              <div class="time">
                <span class="date">Dec 06</span>
                <span class="hour">21:09</span>
              </div>
              <div class="stages bg-stage">
                <div class="item-stage">
                  <h5 class="stage-name bg-success"></h5>
                  <p class="actions">
                    <span class="action-name no-start bg-success"></span>
                    <span class="action-name start bg-fail"></span>
                    <span class="action-name no-start bg-fail"></span>
                  </p>
                </div>
                <div class="item-stage">
                  <h5 class="stage-name bg-success"></h5>
                  <p class="actions">
                    <span class="action-name no-start bg-success"></span>
                    <span class="action-name start bg-fail"></span>
                    <span class="action-name no-start bg-fail"></span>
                  </p>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="fa fa-times close"></div>
    </div>
  </div>
</div>
     